<template>
    <div class="app-container">
      <!-- 搜索条件 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="执行器" prop="jobGroup">
          <el-select v-model="queryParams.jobGroup" placeholder="全部" style="width: 150px;">
           <el-option v-for="item in actuator_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option> 
          </el-select>
        </el-form-item>
        <el-form-item label="任务">
          <el-select  style="width: 150px;" v-model="task">
            <el-option label="全部" value="123"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="logStatus">
          <el-select v-model="queryParams.logStatus" style="width: 150px;" >
          <el-option label="全部" value="-1"></el-option>
          <el-option label="成功" value="1"></el-option>
          <el-option label="失败" value="2"></el-option>
          <el-option label="进行中" value="3"></el-option> 
        </el-select>
        </el-form-item>
        <el-form-item label="调度时间">
          <el-date-picker
            v-model="dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            @click="clearlog"
          >清理</el-button>
        </el-form-item>
      </el-form>

      <!--select控制一个页面展示多少条-->
    <div>每页
      <el-select v-model="queryParams.pageSize" style="width: 80px" @change="handleSizeChange">
        <el-option label="10" value="10"></el-option>
        <el-option label="20" value="20"></el-option>
        <el-option label="30" value="30"></el-option>
        <el-option label="50" value="50"></el-option>
        <el-option label="100" value="100"></el-option>
      </el-select>
      条记录
    </div>
  
    <!-- 表格数据 -->
      <el-table v-loading="loading" :data="logList" :default-sort="defaultSort">
        <el-table-column label="任务ID" align="center" prop="jobId" />
        <el-table-column label="调度时间" align="center" prop="triggerTime" width="180">
          <template slot-scope="scope">
          <span>{{ parseTime(scope.row.triggerTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
        </el-table-column>
        <el-table-column label="调度结果" align="center" prop="triggerCode" >
          <template slot-scope="scope">
            <span v-if="scope.row.triggerCode==500" style="color: red;">失败</span>
            <span v-else style="color: green;">成功</span>
          </template>
        </el-table-column>
        <el-table-column label="调度备注" align="center" prop="triggerMsg" >
          <template slot-scope="scope">
            <el-link type="primary" :underline="false"  @click="stateFormat(scope.row)" >查看</el-link>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" align="center" prop="handleTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.handleTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行结果" align="center" prop="handleCode" >
          <template slot-scope="scope">
            <span v-if="scope.row.handleCode==0"></span>
            <span v-else-if="scope.row.handleCode==200" style="color: green;">成功</span>
            <span v-else style="color: red;">失败</span>
          </template>
        </el-table-column>
        <el-table-column label="执行备注" align="center" prop="handleMsg" >
          <template slot-scope="scope">
            <span v-if="scope.row.handleMsg==null||scope.row.handleMsg==''">无</span>
            <span v-else>
              <el-link type="primary" :underline="false" @click="state(scope.row)">查看</el-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <span v-if="scope.row.triggerCode==500"></span>
            <span v-else-if="scope.row.handleCode==0">
              <el-dropdown trigger="click" size="small">
                <el-button class="oper" size="small">操作<i class="el-icon-caret-bottom"></i></el-button>  
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item >
                        <router-link :to="'/xxl-job/joblog/logDetailPage/' + scope.row.id" class="link-type">
                        <span>执行日志</span>
                      </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="stoplog(scope.row.id)">终止任务</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
            <span v-else>
              <el-dropdown trigger="click" size="small">
                <el-button class="oper" size="small">操作<i class="el-icon-caret-bottom"></i></el-button>  
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item >
                        <router-link :to="'/xxl-job/joblog/logDetailPage/' + scope.row.id" class="link-type">
                        <span>执行日志</span>
                      </router-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
          </template>
        </el-table-column>
      </el-table>
      
      <!--下面展示总共条数和切换页面-->
    <el-pagination background layout="total,->,prev, pager, next" v-show="total > 0" :total="total"
      :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" prev-text="上页" next-text="下页"
      @pagination="getList" @current-change="handleCurrentChange" />
      
      <!-- 查看调度备注对话框 -->
    <el-dialog :title="title" :visible.sync="check" width="20%">
          <span v-html="Trimsg"></span>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="check = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 查看执行备注对话框 -->
      <el-dialog :title="title" :visible.sync="checkhandle" width="20%">
          <span>{{ hanMsg }}</span>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="checkhandle = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 日志清理对话框 -->
      <el-dialog :title="title" :visible.sync="clear" width="450px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="执行器">
                  <el-select :disabled=true v-model="form.jobGroup">
                    <el-option label="全部" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="任务">
                  <el-select :disabled=true v-model="form.jobId">
                    <el-option label="全部" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="清理方式">
                    <el-select v-model="form.type">
                        <el-option label="清理一个月之前日志数据" :value="1"></el-option>
                        <el-option label="清理三个月之前日志数据" :value="2"></el-option>
                        <el-option label="清理六个月之前日志数据" :value="3"></el-option>
                        <el-option label="清理一年之前日志数据" :value="4"></el-option>
                        <el-option label="清理一千条以前日志数据" :value="5"></el-option>
                        <el-option label="清理一万条以前日志数据" :value="6"></el-option>
                        <el-option label="清理三万条以前日志数据" :value="7"></el-option>
                        <el-option label="清理十万条以前日志数据" :value="8"></el-option>
                        <el-option label="清理所有日志数据" :value="9"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="handleClean">确 定</el-button>
  </div>
</el-dialog>
    </div>
  </template>
  
  <script>
  import { listLog, CleanLog,Stoptask } from "@/api/xxl-job/log";
  import { listGroup } from "@/api/xxl-job/group";
  
  export default {
    name: "Log",
    data() {
      return {
        task:'123',
        //终止任务
        stopid:{
          id:0,
        },
        //选择调度时间
        pickerOptions: {
          shortcuts: [
          {
            text: '最近一小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 );
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '今日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setTime(start.getTime() + 3600 * 1000*24-1 );
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              start.setTime(start.getTime()-3600*1000*24)
              end.setTime(start.getTime() + 3600 * 1000*24-1 );
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setDate(1));
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              let year = new Date().getFullYear();
              let month = new Date().getMonth() + 1;
              if(month==2){
                if(year%4==0){
                end.setTime(start.getTime()+3600*1000*24*29-1000)
              }
              else{
                end.setTime(start.getTime()+3600*1000*24*28-1000)
              }
              }
              else if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
                end.setTime(start.getTime()+3600*1000*24*31-1000)
              }
              else{
                end.setTime(start.getTime()+3600*1000*24*30-1000)
              }
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '上个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.setDate(1));
              end.setHours(0);
              end.setMinutes(0);
              end.setSeconds(0);
              end.setMilliseconds(0);
              end.setTime(end.getTime()-1000)
              let year = new Date().getFullYear();
              let month = new Date().getMonth() + 1;
              if(month==3){
                if(year%4==0){
                start.setTime(end.getTime()-3600*1000*24*29+1000)
              }
              else{
                start.setTime(end.getTime()-3600*1000*24*28+1000)
              }
              }
              else if(month==2||month==4||month==6||month==8||month==9||month==11||month==1){
                start.setTime(end.getTime()-3600*1000*24*31+1000)
              }
              else{
                start.setTime(end.getTime()-3600*1000*24*30+1000)
              }
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(0);
              start.setTime(end.getTime() - 3600 * 1000*24*8+1000 );
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(0);
              let year = new Date().getFullYear();
              let month = new Date().getMonth() + 1;
              if(month==3){
                if(year%4==0){
                start.setTime(end.getTime()-3600*1000*24*30+1000)
              }
              else{
                start.setTime(end.getTime()-3600*1000*24*29+1000)
              }
              }
              else if(month==2||month==4||month==6||month==8||month==9||month==11||month==1){
                start.setTime(end.getTime()-3600*1000*24*32+1000)
              }
              else{
                start.setTime(end.getTime()-3600*1000*24*31+1000)
              }
              picker.$emit('pick', [start, end]);
            }
          },]
        },
        //执行备注
        hanMsg:'',
        //调度备注
        Trimsg:'',
        //日期范围
        dateRange:[],
        // 排序 每页最新的在上面
        defaultSort: {prop: 'triggerTime', order: 'descending'},
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 表格数据
        logList: [],
        // 获取的执行器数据
        grouplist: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        check:false,
        checkhandle:false,
        clear:false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id:null,
          jobGroup: null,
          jobId: null,
          executorAddress: null,
          executorHandler: null,
          executorParam: null,
          executorShardingParam: null,
          executorFailRetryCount: null,
          triggerTime: null,
          triggerCode: null,
          triggerMsg: null,
          handleTime: null,
          handleCode: '',
          handleMsg: null,
          alarmStatus: null,
          logStatus:'-1',
        },
        // 表单参数
        form: {},
        actuator_options: [],
      };
    },
    created() {
      this.getList();
    },
    mounted() {
    this.getGroup()
    },
    methods: {
      /**页面改变变化 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    /**修改当前页所触发的函数*/
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
      //终止任务
      stoplog(id){
         this.stopid.id=id
        this.$modal.confirm("确认终止任务吗？").then(()=>{
          return Stoptask(this.stopid)
        }).then(response=>{
                this.$modal.msgSuccess("终止成功");
                this.getList();
          }).catch(() => {
              });
      },
        //打开清理日志
        clearlog(){
            this.reset();
            this.clear=true
            this.title='日志清理'
        },
        // 获取执行器数据
    getGroup() {
      this.loading = true;
      listGroup(this.queryParams).then(response => {
        this.groupList = response.rows;
        for (let item in this.groupList) {
          this.actuator_options.push({
            value: this.groupList[item].id,
            label: this.groupList[item].title
          })
        }
        this.loading = false;
      });
    },
      //查看执行备注
      state(row){
        this.hanMsg=row.handleMsg
        this.checkhandle=true
      },
      //查看调度备注
      stateFormat(row){
        this.Trimsg=row.triggerMsg
        this.check=true
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        listLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.logList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.clear = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          jobGroup:0,
          jobId:0,
          type:1,
        };
        this.resetForm("form");
      },
      /* 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      //清理日志
      handleClean:function(){
        this.$refs["form"].validate(valid => {
          if(valid){
            CleanLog(this.form).then(response => {
                this.$modal.msgSuccess("清理成功");
                this.clear = false;
                this.getList();
              })
          }
        });
      },
    }
  };
</script>
<style>
/* 操作按钮样式保持不变 */
.oper,
.oper:hover,
.oper:focus{
  color: white;
  background-color: rgb(60,141,188);
}
</style>